<template>
    <div class="no-coupons">
        <div class="cp-content">
            <div class="banner" v-if="label == 'product'">
                <p>{{$t('product.noCoupons.txt1')}}</p>
                <p>{{$t('product.noCoupons.txt2')}}</p>
            </div>
            <div class="banner" v-if="label == 'coupon'">
                <p>{{$t('product.noCoupons.txt2')}}</p>
                <p>{{$t('product.noCoupons.txt6')}}</p>
            </div>
            <div class="cp-steps">
                <el-steps align-center>
                    <el-step :title="$t('product.noCoupons.step1')" icon="i-mgm-1"></el-step>
                    <el-step :title="$t('product.noCoupons.step2')" icon="i-mgm-2" ></el-step>
                    <el-step :title="$t('product.noCoupons.step3')" icon="i-mgm-3" ></el-step>
                    <el-step :title="$t('product.noCoupons.step4')" icon="i-mgm-4" ></el-step>
                </el-steps>
            </div>
            <div class="cp-infos">
                <div class="cp-title">{{$t('product.noCoupons.txt3')}}</div>
                <div class="cp-sub-title">{{$t('product.noCoupons.txt4')}}</div>
                <div class="cp-arrow"></div>
                <Share></Share>
                <a href="javascript:;" class="go-mgm hide">{{$t('product.noCoupons.txt5')}}</a>
            </div>
        </div>
    </div>
</template>

<script>
    import Share from './share'
    export default {
        props: {
            label: {
                type: String,
                default: 'product'
            }
        },
      components: { Share },
        data() {
            return {
                
            }
        },
        methods: {
            
            
        },
        
        created() {
           
            function loadDynamicContent() {
    // Code that will load the dynamic content

    // Once that's all done, call addthis.toolbox()
    addthis.toolbox('.addthis_toolbox')
}
            // alert(9)
            // $('.dialog-coupon li').click(() => {
            // 	$(this).addClass('active');
            // })
        }
    }
</script>

<style  scoped>
    p {
        margin: 0;
    }
    li {
        list-style: none;
    }
    .no-coupons {
        text-align: center;
        background:#FAFBFC;
        padding-bottom: 40px;
    }
    .no-coupons .cp-content {
        width: 898px;
        margin: 0 auto 40px auto;
    }
    .no-coupons .banner {
        background: #3DBDB6;
        padding: 35px;
        color: #ffffff;
    }
    .no-coupons .banner p:nth-of-type(1) {
        font-size: 26px;
        line-height: 1.4;
        padding-bottom: 16px;
    }
    .no-coupons .banner p:nth-of-type(2) {
        font-size: 16px;
    }
    .cp-steps {
        background: #F3F4FB;
        padding-bottom: 20px;
    }
    .cp-steps .el-steps {
        width: 80%;
        margin: 0 auto;
    }
    .cp-infos {
        background: #ffffff;
        padding: 55px 0;
    }
    .cp-title {
        font-size: 17px;
        color: #333333;
        padding-bottom: 15px;
    }
    .cp-sub-title {
        font-size: 14px;
        color: #72808E;
        padding-bottom: 29px;
    }
    .cp-arrow {
        width: 580px;
        height: 27px;
        margin: 0 auto 32px auto;
        background: url("../../../../assets/top-arrow.png") no-repeat center;
        background-size: contain;
    }
    .cp-share {
        width: 580px;
        margin: 0 auto !important;
    }
    .cp-share span {
        display: inline-block;
        font-size: 12px;
        color: #030303;
        padding-top: 10px;
    }
    .cp-share .grid-content div {
        margin: 0 auto;
        cursor: pointer;
    }
    .go-mgm {
        margin-top: 70px;
        font-size: 13px;
        color: #3DBDB6;
    }
</style>
<style type="text/css">
    .cp-steps .el-step__icon.is-icon i {
        width: 40px;
        height: 40px;
    }
    .cp-steps .el-step__icon.is-icon {
        width: 80px;
        background: #F3F4FB;
    }
    .cp-steps .i-mgm-1 {
        background: url("../../../../assets/icons/mgm-1.png") no-repeat center;
        background-size: contain;
    }
    .cp-steps .i-mgm-2 {
        background: url("../../../../assets/icons/mgm-3.png") no-repeat center;
        background-size: contain;
    }
    .cp-steps .i-mgm-3 {
        background: url("../../../../assets/icons/mgm-3.png") no-repeat center;
        background-size: contain;
    }
    .cp-steps .i-mgm-4 {
        background: url("../../../../assets/icons/mgm-4.png") no-repeat center;
        background-size: contain;
    }
    .cp-steps .el-step.is-horizontal {
        margin-top: 22px;
    }
    .cp-steps .el-step__line {
        background: #E7E7E7;
    }
    .cp-steps .el-step__title.is-wait , .cp-steps .el-step__title{
        font-size: 12px;
        color: #333333;
        line-height: 25px;
    }
    .cp-steps .el-step.is-center .el-step__line {
        background: url("../../../../assets/icons/dot.png") no-repeat center;
        background-size: contain;
        height: 8px;
    }
    .no-coupons .el-dialog--center .el-dialog__body {
        padding: 0 27px 40px;
    }
</style>
